<template>
  <div class="app-container">
    <el-form :inline="true" :model="formParams" v-show="showSearch" class="demo-form-inline">
      <el-form-item label="券码编号" prop="orderSn">
        <el-input
          v-model.trim="formParams.orderSn"
          placeholder="请输入"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="企业名称" prop="enterpriseName">
        <el-input
          v-model.trim="formParams.enterpriseName"
          clearable
          placeholder="请输入"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="formParams.status" placeholder="请选择" clearable>
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="&nbsp;">
        <el-button @click="handleReset()">重置</el-button>
        <el-button type="primary" @click="handleQuery()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="list">
      <el-table-column label="订单编号" align="center" prop="orderSn" />
      <el-table-column label="企业名称" align="center" prop="enterpriseName" />
      <el-table-column label="扫码次数" align="center" prop="scanCount" />
      <el-table-column label="状态" align="center" prop="status" />
      <el-table-column label="取餐完成时间" align="center" prop="finishTime" />
      <el-table-column label="取餐详情" align="center">
        <template #default="{ row }">
          <el-button
            v-hasPermi="['dataReport:couponsCode:details']"
            type="primary"
            text
            @click="handleDetails(row.orderSn)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="formParams.pageNum"
      v-model:limit="formParams.pageSize"
      @pagination="getList()"
    />
    <detailsDialog ref="detailsDialogRef" />
  </div>
</template>
<script setup>
import { getEnterpriseCouponListApi } from '@/api/marketing/tool/coupon'
import detailsDialog from './components/detailsDialog'
import { parseTime } from '@/utils/tools'

const statusList = [
  { value: 0, label: '不可用' },
  { value: 1, label: '可用' }
]
const loading = ref(false)
const showSearch = ref(true)
const list = ref([])
const total = ref(0)
const detailsDialogRef = ref()
const formParams = ref({
  pageNum: 1,
  pageSize: 10,
  orderSn: null,
  enterpriseName: null,
  status: null
})
function handleReset() {
  formParams.value = {
    pageNum: 1,
    pageSize: 10,
    orderSn: null,
    enterpriseName: null,
    status: null
  }
  getList()
}
function handleQuery() {
  formParams.value.pageNum = 1
  getList()
}
function handleDetails(orderSn) {
  detailsDialogRef.value.init(orderSn)
}
function getList() {
  loading.value = true
  getEnterpriseCouponListApi(formParams.value)
    .then((res) => {
      total.value = res.data.total
      list.value = res.data.rows.map((item) => {
        return {
          ...item,
          finishTime: parseTime(item.finishTime),
          status: statusList.find((ev) => ev.value == item.status).label
        }
      })
    })
    .finally(() => {
      loading.value = false
    })
}
getList()
</script>
<style lang="scss">
.el-input {
  width: 215px;
}
</style>
